{% extends "layouts/base.html" %} {% block title %}视力数据录入管理{% endblock
%} {% block styles %}
<link
  rel="stylesheet"
  href="{{ url_for('static', filename='css/bootstrap.min.css') }}"
/>
<link
  rel="stylesheet"
  href="{{ url_for('static', filename='css/bootstrap-icons.min.css') }}"
/>
<link
  rel="stylesheet"
  href="{{ url_for('static', filename='css/core.css') }}"
/>
<link
  rel="stylesheet"
  href="{{ url_for('static', filename='css/vision_record.css') }}"
/>
<link
  rel="stylesheet"
  href="{{ url_for('static', filename='css/components/student-info-bar.css') }}"
/>
{% endblock %} {% block content %}
<h5 class="mt-3">视力数据录入管理</h5>

<div class="row">
  <!-- 查询输入区域（配置驱动） -->
  <div id="fixedQueryArea"></div>

  <!-- 查询结果表 -->
  <div id="scrollable-content" class="col-12">
    <div class="card" id="search-results" style="display: none">
      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-striped table-hover w-100">
            <thead id="queryTableHead">
              <!-- 由通用QueryResultTable组件动态渲染 -->
            </thead>
            <tbody id="queryTableBody">
              <!-- 由通用QueryResultTable组件动态渲染 -->
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- 分页控件 -->
    <div id="pagination-bar" style="text-align: center; margin: 16px 0"></div>

    <!-- 学生基本信息条（统一组件） -->
    <div id="student-info-bar" class="student-info-bar-row">
      <!-- 由统一组件 renderStudentInfoBar() 动态渲染 -->
    </div>

    <!-- 视力数据录入表单 -->
    <form id="vision-form" style="display: none">
      <div class="card mb-4">
        <div class="card-header">视力数据录入</div>
        <div class="card-body">
          <!-- 基础信息 -->
          <div class="row g-3 mb-4">
            <div class="col-md-3">
              <label class="form-label">检查日期</label>
              <input
                class="form-control"
                type="date"
                name="measure_date"
                required
              />
            </div>
            <div class="col-md-3">
              <label class="form-label">检查时间</label>
              <input class="form-control" type="time" name="measure_time" />
            </div>
            <div class="col-md-3">
              <label class="form-label">检查地点（机构）</label>
              <!-- ✅配置驱动：改为下拉框，由JS动态生成选项 -->
              <select class="form-select" name="measure_location">
                <!-- 由配置驱动的JS动态生成选项 -->
              </select>
            </div>
            <div class="col-md-3">
              <label class="form-label">检查类型</label>
              <!-- ✅配置驱动：移除硬编码选项，由JS动态生成 -->
              <select class="form-select" name="measure_type">
                <!-- 由配置驱动的JS动态生成选项 -->
              </select>
            </div>
            <div class="col-md-3">
              <label class="form-label">检查人员</label>
              <input class="form-control" name="measurer" required />
            </div>
            <div class="col-md-3">
              <div class="form-check">
                <input
                  class="form-check-input"
                  type="checkbox"
                  name="is_baseline"
                  id="is_baseline"
                />
                <label class="form-check-label" for="is_baseline">
                  基线记录
                </label>
              </div>
            </div>
          </div>

          <!-- 视力数据 -->
          <h6 class="mb-3">视力数据</h6>
          <div class="row g-3 mb-4">
            <div class="col-md-3">
              <label class="form-label">右眼裸眼视力</label>
              <input
                class="form-control"
                type="number"
                step="0.01"
                name="right_eye_naked"
              />
            </div>
            <div class="col-md-3">
              <label class="form-label">左眼裸眼视力</label>
              <input
                class="form-control"
                type="number"
                step="0.01"
                name="left_eye_naked"
              />
            </div>
            <div class="col-md-3">
              <label class="form-label">右眼矫正视力</label>
              <input
                class="form-control"
                type="number"
                step="0.01"
                name="right_eye_corrected"
              />
            </div>
            <div class="col-md-3">
              <label class="form-label">左眼矫正视力</label>
              <input
                class="form-control"
                type="number"
                step="0.01"
                name="left_eye_corrected"
              />
            </div>
          </div>

          <!-- 屈光数据 -->
          <h6 class="mb-3">屈光数据</h6>
          <div class="row g-3 mb-4">
            <div class="col-md-2">
              <label class="form-label">右眼球镜</label>
              <input
                class="form-control"
                type="number"
                step="0.01"
                name="right_sphere"
              />
            </div>
            <div class="col-md-2">
              <label class="form-label">左眼球镜</label>
              <input
                class="form-control"
                type="number"
                step="0.01"
                name="left_sphere"
              />
            </div>
            <div class="col-md-2">
              <label class="form-label">右眼柱镜</label>
              <input
                class="form-control"
                type="number"
                step="0.01"
                name="right_cylinder"
              />
            </div>
            <div class="col-md-2">
              <label class="form-label">左眼柱镜</label>
              <input
                class="form-control"
                type="number"
                step="0.01"
                name="left_cylinder"
              />
            </div>
            <div class="col-md-2">
              <label class="form-label">右眼轴位</label>
              <input
                class="form-control"
                type="number"
                step="1"
                name="right_axis"
              />
            </div>
            <div class="col-md-2">
              <label class="form-label">左眼轴位</label>
              <input
                class="form-control"
                type="number"
                step="1"
                name="left_axis"
              />
            </div>
          </div>

          <!-- 散瞳数据 -->
          <h6 class="mb-3">散瞳数据</h6>
          <div class="row g-3 mb-4">
            <div class="col-md-2">
              <label class="form-label">右眼散瞳球镜</label>
              <input
                class="form-control"
                type="number"
                step="0.01"
                name="right_dilated_sphere"
              />
            </div>
            <div class="col-md-2">
              <label class="form-label">左眼散瞳球镜</label>
              <input
                class="form-control"
                type="number"
                step="0.01"
                name="left_dilated_sphere"
              />
            </div>
            <div class="col-md-2">
              <label class="form-label">右眼散瞳柱镜</label>
              <input
                class="form-control"
                type="number"
                step="0.01"
                name="right_dilated_cylinder"
              />
            </div>
            <div class="col-md-2">
              <label class="form-label">左眼散瞳柱镜</label>
              <input
                class="form-control"
                type="number"
                step="0.01"
                name="left_dilated_cylinder"
              />
            </div>
            <div class="col-md-2">
              <label class="form-label">右眼散瞳轴位</label>
              <input
                class="form-control"
                type="number"
                step="1"
                name="right_dilated_axis"
              />
            </div>
            <div class="col-md-2">
              <label class="form-label">左眼散瞳轴位</label>
              <input
                class="form-control"
                type="number"
                step="1"
                name="left_dilated_axis"
              />
            </div>
          </div>

          <!-- 散瞳视力数据 -->
          <div class="row g-3 mb-4">
            <div class="col-md-3">
              <label class="form-label">右眼散瞳视力</label>
              <input
                class="form-control"
                type="number"
                step="0.01"
                name="right_dilated_vision"
              />
            </div>
            <div class="col-md-3">
              <label class="form-label">左眼散瞳视力</label>
              <input
                class="form-control"
                type="number"
                step="0.01"
                name="left_dilated_vision"
              />
            </div>
          </div>

          <!-- 其他检查数据 -->
          <h6 class="mb-3">其他检查数据</h6>
          <div class="row g-3 mb-4">
            <div class="col-md-3">
              <label class="form-label">右眼角膜曲率K1</label>
              <input
                class="form-control"
                type="number"
                step="0.01"
                name="right_keratometry_K1"
              />
            </div>
            <div class="col-md-3">
              <label class="form-label">左眼角膜曲率K1</label>
              <input
                class="form-control"
                type="number"
                step="0.01"
                name="left_keratometry_K1"
              />
            </div>
            <div class="col-md-3">
              <label class="form-label">右眼角膜曲率K2</label>
              <input
                class="form-control"
                type="number"
                step="0.01"
                name="right_keratometry_K2"
              />
            </div>
            <div class="col-md-3">
              <label class="form-label">左眼角膜曲率K2</label>
              <input
                class="form-control"
                type="number"
                step="0.01"
                name="left_keratometry_K2"
              />
            </div>
          </div>

          <div class="row g-3 mb-4">
            <div class="col-md-3">
              <label class="form-label">右眼眼轴</label>
              <input
                class="form-control"
                type="number"
                step="0.01"
                name="right_axial_length"
              />
            </div>
            <div class="col-md-3">
              <label class="form-label">左眼眼轴</label>
              <input
                class="form-control"
                type="number"
                step="0.01"
                name="left_axial_length"
              />
            </div>
            <div class="col-md-3">
              <label class="form-label">右眼前房深度</label>
              <input
                class="form-control"
                type="number"
                step="0.01"
                name="right_anterior_depth"
              />
            </div>
            <div class="col-md-3">
              <label class="form-label">左眼前房深度</label>
              <input
                class="form-control"
                type="number"
                step="0.01"
                name="left_anterior_depth"
              />
            </div>
          </div>

          <!-- 辅助信息 -->
          <h6 class="mb-3">辅助信息</h6>
          <div class="row g-3 mb-4">
            <div class="col-md-4">
              <label class="form-label">眼疲劳状况</label>
              <input class="form-control" name="eye_fatigue" />
            </div>
            <div class="col-md-4">
              <label class="form-label">检查设备型号</label>
              <input class="form-control" name="equipment_model" />
            </div>
            <div class="col-md-4">
              <label class="form-label">其他情况</label>
              <input class="form-control" name="other_info" />
            </div>
          </div>

          <div class="row g-3 mb-4">
            <div class="col-md-12">
              <label class="form-label">备注信息</label>
              <textarea class="form-control" name="remarks" rows="3"></textarea>
            </div>
          </div>
        </div>

        <div class="mb-3 text-end">
          <button type="submit" class="btn btn-primary">保存</button>
          <button type="button" class="btn btn-secondary" id="cancel-btn">
            取消
          </button>
          <button type="button" class="btn btn-outline-secondary" id="btn-back">
            返回
          </button>
          <button type="button" class="btn btn-info" id="btn-show-all">
            查询全部检查记录
          </button>
          <button type="button" class="btn btn-success" id="btn-export-xlsx">
            导出Excel
          </button>
        </div>
      </div>
    </form>

    <!-- 视力记录历史表格区域 -->
    <div id="history-table-area" class="col-12" style="display: none">
      <div class="card">
        <div class="card-header">视力检查记录历史</div>
        <div class="card-body">
          <table class="table table-hover" id="history-table">
            <thead>
              <tr id="history-table-header">
                <!-- 由JS配置驱动加载 -->
              </tr>
            </thead>
            <tbody>
              <!-- 由JS加载 -->
            </tbody>
          </table>
        </div>
      </div>
      <div class="mb-3 text-end">
        <button type="button" class="btn btn-secondary" id="btn-view-all-logs">
          查看全部日志
        </button>
        <button
          type="button"
          class="btn btn-success"
          id="btn-export-xlsx-history"
        >
          导出Excel
        </button>
        <button
          type="button"
          class="btn btn-outline-primary"
          id="btn-student-record"
        >
          学生档案
        </button>
      </div>
    </div>
  </div>
</div>
{% endblock %} {% block scripts %}
<script src="{{ url_for('static', filename='js/FixedQueryArea.js') }}"></script>
<script src="{{ url_for('static', filename='js/QueryResultTable.js') }}"></script>
<script src="{{ url_for('static', filename='js/components/student-info-bar.js') }}"></script>
<script src="{{ url_for('static', filename='js/vision_record.js') }}"></script>
{% endblock %}
